import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Tabs, Spin } from 'antd';
import checkCenterService from 'containers/financial-management/check-center/check-center.service'
import 'styles/financial-management/check-center/check-center.scss'
import CheckCenterBill from './check-center-bill';

const TabPane = Tabs.TabPane;

class CheckCenter extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      loading: false,
      vendorList:[]
    }
  }

  componentWillMount(){
    this.getSupplier()
  }

  formatOptions = (type) => {
    const {supplierData} = this.state;
    const options = [];
    let dataName = type === 'air' ? 'flight' : type;
    if(supplierData[dataName]){
      supplierData[dataName].map(item =>{
        options.push({
          label:item.name,
          value:item.enName
        })
      });
    }
    return options;
  }


  getSupplier = () => {
    checkCenterService.getSuppliers().then(res =>{
      this.getList();
      this.setState({supplierData: res.data})
    })
  }


  getList(){
    let value = {
      channel:'hly-admin',
      companyOID: this.props.company.companyOID,
      companyType: this.props.tenantMode ? '1002' : '1001',
    };
    this.setState({loading: true});
    checkCenterService.getTotalSummary(value).then((response)=>{
      if(response.data.summaryVOList && response.data.summaryVOList.length>0){
        this.setState({
          vendorList:response.data.summaryVOList,
          loading: false,
        })
      }else{
        this.setState({loading: false});
      }
    })
  }

  //账单详情
  handleTicket = (key) =>{
    switch (key){
      case 'air':
        return <CheckCenterBill params={{type: key, option: this.formatOptions(key)}}/>
        break;
      case 'hotel':
        return <CheckCenterBill params={{type: key, option: this.formatOptions(key)}}/>
        break;
      case 'train':
        return <CheckCenterBill params={{type: key, option: this.formatOptions(key)}}/>
        break;
      case 'car':
        return <CheckCenterBill params={{type: key, option: this.formatOptions(key)}}/>
        break;
      case 'yget':
        return <CheckCenterBill params={{type: key, option: this.formatOptions(key)}}/>
      case 'dining':
        return <CheckCenterBill params={{type: key, option: this.formatOptions(key)}}/>
        break;
    }
  };

  renderTabPane = () => {
    const { vendorList } = this.state;
    return (
      <Tabs type='card'>
        {
          vendorList.map((item, index) => {
            return (
              item.vendorType === 'train' ? null : <TabPane tab={this.renderTabTitle(item)} key={item.vendorType}>
                {this.handleTicket(item.vendorType)}
              </TabPane>
            )
          })
        }
      </Tabs>
    )
  }

  renderTabTitle = (item) => {
     return (
       <div className='tab-title'>
         <span className='title'>{item.vendorTypeName}{messages('financial-management.key762')/*账单*/}</span>
         {false && <span className='danger-number'>
           <span className='label-text'>{messages('financial-management.key172'/*待确认*/)}</span>
           <span className='default-color-inverse-font'>
             &nbsp;{item.notReconciledNum}&nbsp;
           </span>
           <span className='label-text'>{messages('financial-management.key211')}</span>
         </span>}
       </div>
     )
  }

  render(){
    const { vendorList, loading } = this.state;
    const tip = loading ? messages('components.key456'/*数据加载中...*/) : messages('financial-management.key763')/*您尚未开通任何消费商*/
    return(
      <Spin spinning={loading}>
        <div className="check-center">
          {
            vendorList.length > 0 ? this.renderTabPane() : (<h3>{tip}</h3>)
          }
        </div>
      </Spin>
    )
  }
}

function mapStateToProps(state) {
  return {
    company: state.login.company,
    tenantMode: state.main.tenantMode,
  }
}

CheckCenter.contextTypes = {
  router: React.PropTypes.object
};

export default connect(mapStateToProps)(CheckCenter);
